window.addEventListener("load", function () {
	// 功能一：海量的API服务区移入移出交互效果
	// 1.获取相关节点
	// $("#api ul li");
	// 2.绑定移入移出事件
	let oldUrl = ""; //变量提升
	$("#api ul li").forEach(function (v) {
		// 2-1.移入效果
		v.addEventListener("mouseover", function () {
			// 2-1-2.文字变白色
			this.style.color = "#fff";
			// 2-1-2.背景色变蓝色
			this.style.backgroundColor = "#2f7ee9";
			// 2-1-3.图片切换为透明色图片
			let imgUrl = this.firstElementChild.src;
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			oldUrl = imgUrl; //用一个变量保存原先的路径
		});
		// 2-2.移出效果
		v.addEventListener("mouseout", function () {
			// 2-2-2.文字变黑色
			this.style.color = "#000";
			// 2-2-2.背景色变白色
			this.style.backgroundColor = "#fff";
			// 2-2-3.图片切换为原先图片
			this.firstElementChild.src = oldUrl;
		});
	});

	// 功能二：独角兽轮播图效果
	// 思路：将多个图文结构bottom全部叠在一个区域  每隔3秒显示一个，其他的不显示
	// 1.获取相关节点
	const bottomS = $("#unicorn .bottom");
	// 2.设置周期定时器
	let num = 1;
	bottomS[0].style.opacity = "1"; //默认显示第0张
	this.window.setInterval(function () {
		// 3.通过索引挨个访问节点
		bottomS.forEach(function (v) {
			//排他思想，不管当前谁显示，每一个周期都先让所有消失
			v.style.opacity = "0";
		});
		// 通过对应索引显示对应内容，其他的不显示
		bottomS[num].style.opacity = "1";
		// 4.设置变量，每隔一个周期就++
		num++;
		if (num > bottomS.length - 1) {
			num = 0;
		}
	}, 3000);
	// 5.通过索引显示对应内容，其他的不显示

	// 功能三：回到顶部
	// 绑定点击事件
	$("span.iconfont").addEventListener("click", function () {
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	});
	// 判断滚动事件
	this.window.addEventListener("scroll", function () {
		if (window.scrollY < 300) {
			$("span.iconfont").style.display = "none";
		} else if (window.scrollY > 300) {
			$("span.iconfont").style.display = "block";
		}
	});

	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		// 分页器（即下面的小圆点）
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});

	//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();
});
